<template>
  <div class="other-stocks">
    <div class="headline">
      <span></span>TA的个股持仓
    </div>

    <div class="list">
      <div class="entry clearfix" v-for="(item,index) in stockList">
        <div class="one link" @click.stop.prevent="toStock(item)">
          <div class="stock">
            <i class="iconfont icon-gu"></i>
            <span class="name">{{item.stockName}}</span>
            <span class="code" v-if="item.exchangeType == 1">SH{{item.stockCode}}</span>
            <span class="code" v-else>SZ{{item.stockCode}}</span>
            <div class="hold-days">
              <span class="key">持仓周期:</span>
              <span class="value">{{item.holdDays}}</span>
              <span class="unit">天</span>
            </div>
          </div>

          <div class="digit">
            <div class="one">
              <div class="value">{{item.costPrice}}</div>
              <div class="key">成本价</div>
            </div>
            <div class="two">
              <div class="value">{{item.marketPrice}}</div>
              <div class="key">现价</div>
            </div>
            <div class="three">
              <div class="value">{{item.position}}%</div>
              <div class="key">仓位</div>
            </div>
            <div class="four">
              <div class="value" :class="item.income<0 ? 'negative': 'positive'">{{item.income}}</div>
              <div class="key">盈亏(<span
                :class="item.income<0 ? 'negative': 'positive'">{{item.yieldRate}}%</span>)
              </div>
            </div>
          </div>
        </div>

        <div class="two">
          <a class="btn" @click.stop.prevent="toBuy(item)" >
            <div>模拟</div>
            <div>买入</div>
          </a>
        </div>
      </div>
    </div>
    <div class="placeholder" v-if="stockList.length==0">
      <div class="content">
        <div class="tips" v-if="error ==''">哎呦，TA还没有<span class="">个股持仓</span>哦</div>
        <div class="tips" v-if="error !=''">{{error}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import LocalDAO from 'common/localDAO'

  export default {
    data () {
      return {
        userCode: LocalDAO.getUserCode(),
        stockList: [],
        error:'',
        testData: 'testData'
      }
    },
    props: {
      clientId: {
        type: String
      }
    },
    created: function () {
      this.fetchData()
    },
    watch: {
      '$route.query.userCode' (to, from) {
        //跳转相同页面，组件不重新构建，无法调用created,故需监听
        this.fetchData ()
      }
    },
    methods: {
      fetchData(){
        var self = this
        RemoteDAO.callJCL11123(self.clientId, "0", "500", function (response) {
          if (Number(response.error) === 0) {
            var list = [];
            _.each(response.data.body.holders, function (item, index) {
              var object = {};
              object.stockName = item.stock_name;
              object.stockCode = item.stock_code;
              object.exchangeType = item.exchange_type;
              object.position = CommonUtil.toFixed(item.position, 2);
              object.costPrice = CommonUtil.toFixed(item.keep_cost_price, 2); // 成本价
              object.marketPrice = CommonUtil.toFixed(item.last_price, 2); // 市价
              object.quantity = CommonUtil.toFixed(item.current_vol, 2); // 持仓数量
              object.holdDays = item.hold_days; // 持仓周期
              object.income = CommonUtil.toFixed(item.income_balance, 2); // 盈亏金额
              if(object.income>=0){
                object.income = "+" + object.income;
              }
              if (item.keep_cost_price > 0) {
                object.yieldRate = CommonUtil.toFixed((item.last_price - item.keep_cost_price) / item.keep_cost_price * 100, 2);
                if(object.yieldRate>=0){
                  object.yieldRate = "+"+object.yieldRate;
                }
              } else {
                object.yieldRate = "--";
              }
              list.push(object);
            });
            self.stockList = list;

          } else {
            self.error = response.data;
          }
        });
      },
      toStock(item){
        var stockCode = item.stockCode;
        var exchangeType = item.exchangeType;
        var market;
        if (exchangeType == "0") {
          market = "SZ";
        } else if (exchangeType == "1") {
          market = "SH";
        }
        RemoteDAO.callStockLive(market + stockCode, "ordinary", "1", function () {
        });
      },
      toBuy(item){
        var self = this;
        var stockCode = item.stockCode;
        var marketCd = item.exchangeType;
        var stockName = item.stockName;
        self.$router.push({
          path: '/trade/buyin',
          query: {
            menuId: '1',
            stockCod: stockCode,
            marketCd: marketCd,
            stockName : stockName ,
            followClient: self.clientId
          }
        })
      }
    }
  }
</script>

<style scoped>
  .icon-gu{
    color:#3CBAEE;
    font-size: 12px;
  }

</style>
